import {Box, FontIcon, Static} from '../components'
import {compose} from "../util";
import {withState} from "recompose";
import {primaryColor} from '../styles/common-color'

const RecTag = ({selected, title, onClick, icon, state: {hover}, setState}) => (
    <Box className='rect-tag' height='4rem' padding='1rem' flex='flex' radius='4px'
         style={{
             border: `1px solid ${(selected || hover) ? '#e4e8e8' : primaryColor}`,
             background: `${(selected || hover) ? '#f3fdfd' : ''}`,
             margin: '.5rem'
         }}
         onClick={onClick}
         onMouseOver={() => setState({hover: true})}
         onMouseLeave={() => setState({hover: false})}
    >
        <Box width='100%' height='100%' flex='flex'>
            <Static label={title} fontSize='1rem'/>
        </Box>

        <Box width='1.2rem' height='100%' flex='flex'>
            {hover && icon && <FontIcon icon='shanchu3' color='#35c0c1'/>}
        </Box>
    </Box>
);

export default compose(
    withState('state', 'setState', {
        hover: false
    })
)(RecTag)